<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>商品商城</title>
    <link href="./themes/ecmoban_dangdang/style.css" rel="stylesheet" type="text/css" />
    <link href="./themes/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="./themes/index.js"></script>
</head>

<body>
<div id="app">
    <div class="top_nav">
        <div class="block">
            <ul class="top_bav_l">
            </ul>
            <div class="header_r">
                <font id="ECS_MEMBERZONE" v-if="islogin"> 欢迎光临本站！ <s></s>&nbsp; <span> <a style="color: #FF6766;"
                                                                                          href="login.html">[用户登录]</a> <a style="color: #FF6766;" href="register.html">[用户注册]</a>
						<a style="color: #FF6766;" href="slogin.html">[商家登录]</a>
						<a style="color: #FF6766;" href="sregister.html">[商家注册]</a>
                </span>
                </font>
                <font id="ECS_MEMBERZONE" v-if="!islogin"> 你好 <b>{{ realname }}</b> <span><a
                        style="color: #FF6766;" href="cart.html">[购物车]</a><a style="color: #FF6766;" href="usercenter.html">[用户中心]</a> <a
                        style="color: #FF6766;" href="exit.html">[退出系统] </a> </span>
                </font>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <div class="block header">
            <div class="top">
                <a href="index.html" class="logo"><img src="themes/ecmoban_dangdang/images/logo.gif" alt="" /></a>
                <div class="top_search">
                    <div class="headSearch_input">
                        <input name="keywords" type="text" class="keyword" v-model="key" /> <input value="" id="seachbtn" type="button" @click="query">
                    </div>
                    <div style="clear: both"></div>
                </div>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="menu_box clearfix">
        <div class="block">
            <div class="menu">
                <a href="index.html" class="cur" rel="nofollow">网站首页</a>
                <a href="article.html" class="cur" rel="nofollow">汽车保养商城公告</a>
                <span v-if="!islogin">
                        <a href="recommend.html" class="cur" rel="nofollow">推荐保养服务</a>
                    </span>
                <a href="all.html" class="cur" rel="nofollow">全部汽车保养</a>
            </div>
        </div>
    </div>
    <div class="blank5"></div>
    <div class="block clearfix">
        <div class="f_l" style="width: 1200px;">
            <div class="container" id="idTransformView">
                <ul class="slider" id="idSlider">
                    <li><img src="pic/shop_slider1.jpg" alt="" /></li>
                    <li><img src="pic/shop_slider2.jpg" alt="" /></li>
                    <li><img src="pic/shop_slider3.jpg" alt=""/></li>
                    <li><img src="pic/shop_slider4.jpg" alt="" /></li>
                </ul>
                <ul class="num" id="idNum">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="blank"></div>
        <div class="blank"></div>
        <div class="goodsBox_1">
            <div class="xm-box" v-for="item in front" :key="item.cateid">
                <h4 class="title">
                    <span>{{ item.catename }}</span> <a class="more" :href="'cate.html?id='+item.cateid+''">更多</a>
                </h4>
                <div id="show_new_area" class="clearfix">
                    <div class="pic" style='margin-left: 0px;' v-for="x in item.goodsList" :key="x.goodsid">
                        <a :href="'detail.html?id='+x.goodsid+''"><img :src="'http://localhost:8080/vue_gxhfztjxt/upfiles/'+x.image" class="img" /></a>
                        <p class="name">
                            <a :href="'detail.html?id='+x.goodsid+''" title="">{{x.goodsname}}</a> &nbsp; {{x.sellername}}
                        </p>
                        <p class="price">
                            价格：
                            <font class="f1"> ￥{{x.price}}元 </font>
                        </p>
                    </div>
                </div>
            </div>
            <div class="blank"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer">
            <div class="footer_nav_box">
                <div class="footer_copyright">
                        <span> &copy;  商品商城 版权所有，并保留所有权利。<br /> <br />服务时间：09:00-23:00<br /> <br /> <a href="../admin/index.html"
                                                                                                       target="_blank">管理员入口</a>
                        </span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!--此页面业务相关的脚本-->
<script type="text/javascript" src="../admin/assets/layui/layui.js"></script>
<script type="text/javascript" src="../admin/assets/js/axios.min.js"></script>
<script type="text/javascript" src="../admin/assets/js/vue.js"></script>
<script type="text/javascript" src="../admin/assets/js/jquery.min.js"></script>
<script type="text/javascript">
    const vue = new Vue({ // 实例化Vue对象
        el: '#app', // 绑定作用域
        data: { //定义数据 用于vue的双向绑定
            islogin: '',
            userid: '',
            realname: '',
            cate: {}, // 用来保存商品类型对象数据
            front: {}, // 用来保存前端显示数据
            key: '',
        },
        methods: {
            loadPage: function() {
                let _this = this;
                axios.get('http://localhost:8080/vue_gxhfztjxt/index/front.action').then(result => {
                    _this.cate = result.data.cateList;
            });
                axios.get('http://localhost:8080/vue_gxhfztjxt/index/index.action').then(result => {
                    _this.front = result.data.frontList;
            });
                _this.userid = sessionStorage.getItem('userid');
                _this.islogin = sessionStorage.getItem('userid') == null;
                _this.realname = sessionStorage.getItem('realname');
            },
            query: function () {
                let url = "query.html?id=" + this.key;
                window.location.href = url;
            },
        },
        created() { // 生命周期相关的函数
            this.loadPage();
        },
    })
</script>

</html>